<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
      /*  函数就是做某件事件。
          完成事件，需要一览某个人，某个人做了某件事，
          谁做了这个事情， this 就是谁 
      */ 
  
    //   1. 区局作用域 或者普通函数中 this 指向全局对象， window 
    //   定时器是  window 的方法， this 是window 

    console.log(this);
    function fn(){
        console.log(this);
    }
    fn();
    window.setTimeout(function(){
        console.log(this);
    },1000)

    // 2 方法调用谁  this 指向谁 

    var a ={
        sayHi:function(){
            console.log(this); // this 指向 a
        }
    }
    a.sayHi();

    // 3. 事件中的  this 是绑定的 对象 
    
    var btn=document.querySelector('button');
    // btn.onclick=function(){
    //     console.log(this);  // this 指向的是 btn这个按钮对象
    // }
    btn.addEventListener('click',function(){
        console.log(this);  // this  指向的是  btn 这个按钮对象
    })

    // 4. 构造函数中 this 指向构造函数的 实例 

    function hero(name){
        this.name=name;  // 构造函数的目的就是创建对象，给当前对象添加属性，
        console.log(this);  // this 指向的是 janna 实例对象 
    }
    // 构造函数  new . 开辟新的内存空间， 创建一个空对象， this 指向这个对象
    // Hero（） 实例化之后，赋值给  janna 
    var janna= new  Hero('迪迦')

    // 5. 箭头函数， this 对象  就是定义该函数时所在的作用域指向的对象

    console.log(this);
    setInterval(() => {
        console.log(this);
    }, 2000);
    
    </script>
</body>
</html>